<template>
    <div class="blog-right-info">
        <div class="articleHot">
            <el-card class="box-card">
                <div slot="header">
                    <span>热门阅读</span>
                </div>
               <div v-if="articleHot!=null">
                   <div v-for="(article,index) in articleHot" :key="index" class="article-item">
                       <a href="javascript:void(0);" @click="toArticleDetail(article.id)"><span>{{article.title}}</span></a>
                   </div>
               </div>
                <div v-else>
                    没有数据
                </div>
            </el-card>
        </div>
        <div class="articleHot">
            <el-card class="box-card">
                <div slot="header">
                    <span>关于</span>
                </div>
                <div>
                    <div style="margin:0 auto;max-width: 150px"><img style="width: 100%" src="../../assets/280280.jpg"/></div>
                    <div style="text-align: center;margin:0 auto;border-radius: 10px; width:200px;background-color: rgba(179,179,179,0.85);"><span>扫码关注公众号:一瓶奶</span></div>
                    <div  style="margin: 2px auto;text-align: center">
                        <i class="iconfont icon-youxiang"></i> yipingnai111@163.com
                    </div>
                    <div class="about-a" style="margin:0 auto;text-align: center">
                        <span><a target="_blank" href="https://gitee.com/yipingnai"><i style="margin-right: 5px" class="iconfont icon-gitee-fill-round"></i>码云</a></span>
                        <span><a target="_blank" href="https://github.com/yipingnai1"><i style="margin: 0 5px 0 10px" class="iconfont icon-GitHub"></i>GitHub</a></span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                articleHot:[],
            }
        },
        methods:{
            toArticleDetail(code){
              this.$router.push(`/index/detail/${code}`);
            },
            initHot(){
                this.getRequest('/blog/article/hot').then(resp=>{
                    if(resp){
                        this.articleHot = resp;
                        console.log(resp + '--')
                    }
                })
            }
        },
        mounted() {
            this.initHot();
            console.log(this.articleHot)
        },
    }
</script>

<style>
    .article-item{
        font-size: 15px;
        margin-bottom: 10px;
        padding-left: 5px;
    }
    .article-item a{
        color: #242424;
        text-decoration: none;
    }
    .about-a a{
        color: #242424;
        text-decoration: none;
    }
    .article-item a:hover{
        color: #3273dc;
    }
    .about-a a:hover{
        color: #3273dc;
    }
    .articleHot .box-card{
        width: 300px;
        padding: 10px;
    }
    .articleHot .el-card__header{
        padding: 8px;
    }
    .articleHot{
        margin-top: 10px;
        width: 300px;
    }
    .articleHot .el-card__body{
        padding: 0;
    }
    .blog-right-info{
        width: 100%;
    }
    @media screen and (max-width:1300px){
        .blog-right-info{
            display: none;
            width: 100%;
        }
    }
</style>